<!DOCTYPE html>
<html lang="en">
<head>
    <title>Session Attributes</title>
    <link rel="stylesheet" href="bootstrap.min.css" />
    <script type="text/javascript" src="jquery-1.10.2.min.js"></script>
    <style type="text/css">
        body {
            padding: 1em;
        }
    </style>
</head>
<body>
<div class="container">
    <h1>Description-html-<span id="portId" style="color:red;"></span>-<span id="sessionId" style="color:blue;"></span></h1>
    <p>This application demonstrates how to use a relational database to back your session. Notice that there is no JSESSIONID cookie. We are also able to customize the way of identifying what the requested session id is.</p>

    <h1>Try it</h1>

    <form class="form-inline" role="form" action="./session" method="post">
        <label for="attributeName">Attribute Name</label>
        <input id="attributeName" type="text" name="attributeName"/>
        <label for="attributeValue">Attribute Value</label>
        <input id="attributeValue" type="text" name="attributeValue"/>
        <input type="submit" value="Set Attribute"/>
    </form>

    <hr/>

    <table class="table table-striped">
        <thead>
        <tr>
            <th>Attribute Name</th>
            <th>Attribute Value</th>
        </tr>
        </thead>
        <tbody id="tbody">
        </tbody>
    </table>
</div>
<script type="text/javascript">
$(function(){
    $.ajax({
        url: "/sessionList",
        dataType: "json",
        success: function (data) {
            document.getElementById("portId").innerHTML = data.portId;
            document.getElementById("sessionId").innerHTML = data.sessionId;
            for(var i=0 ; i < data.list.length ; i++){
                var item = data.list[i];
                $("#tbody").append("<tr><td>" + item.name + "</td><td>" + item.value + "</td></tr>");
            }
        },
        error: function (a,b,c) {
            console.log(b);
        }
    });
});
</script>
</body>
</html>